'use strict';

import React from 'react';
import Radium from 'radium';
import TemplateStyleEditor from './TemplateStyleEditor';
import Controller from './Controller';
import BaseStyleEditor from './BaseStyleEditor';

@Radium
class Menu extends React.Component {
  state : {
    page : string;
  };

  constructor(props) {
    super(props);

    this.state = { page : '' };

    (this : any).clickTemplate = this.clickTemplate.bind(this);
    (this : any).clickPage = this.clickPage.bind(this);
    (this : any).clickItem = this.clickItem.bind(this);
    (this : any).clickOperation = this.clickOperation.bind(this);
    (this : any).returnToMenu = this.returnToMenu.bind(this);
  }

  clickTemplate() {
    this.setState({page : 'template'});
  }

  clickPage() {
    this.setState({page : 'page'});
  }

  clickItem() {
    this.setState({page : 'item'});
  }

  clickOperation() {
    this.setState({page : 'operation'});
  }

  returnToMenu() {
    this.setState({page : ''});
  }

  render() {
    if(this.state.page == '')
      return <div style={{width: '100%', height: '100%'}}>
                <div style={{cursor : 'pointer', position: 'relative', display: 'inline-block', width: '200px', height: '200px', border: '1px solid', marginRight: '30px'}} onClick={this.clickTemplate}>
                  <span style={{ position: 'absolute', top: '70px', left: '70px'}}>模板编辑</span>
                </div>
                <div style={{cursor : 'pointer', position: 'relative', display: 'inline-block', width: '200px', height: '200px', border: '1px solid', marginRight: '30px'}} onClick={this.clickPage}>
                  <span style={{ position: 'absolute', top: '70px', left: '70px'}}>页面编辑</span>
                </div>
                <div style={{cursor : 'pointer', position: 'relative', display: 'inline-block', width: '200px', height: '200px', border: '1px solid', marginRight: '30px'}} onClick={this.clickItem}>
                  <span style={{ position: 'absolute', top: '70px', left: '70px'}}>元素编辑</span>
                </div>
                <div style={{cursor : 'pointer', position: 'relative', display: 'inline-block', width: '200px', height: '200px', border: '1px solid', marginRight: '30px'}} onClick={this.clickOperation}>
                  <span style={{ position: 'absolute', top: '70px', left: '70px'}}>操作编辑</span>
                </div>
             </div>;
    else if(this.state.page == 'template')
      return <TemplateStyleEditor returnToMenu={this.returnToMenu} />;
    else if(this.state.page == 'page')
      return <BaseStyleEditor  returnToMenu={this.returnToMenu} get={Controller.getPage} update={Controller.updatePage} />;
    else if(this.state.page == 'item')
      return <BaseStyleEditor  returnToMenu={this.returnToMenu} get={Controller.getItem} update={Controller.updateItem} />;
    else if(this.state.page == 'operation')
      return <BaseStyleEditor  returnToMenu={this.returnToMenu} get={Controller.getOperation} update={Controller.updateOperation} />;
    else
      return null;
  }
};

module.exports=Menu;
